<template>
  <view class="page container">
    <eui-card is-full>
      <text class="eui-h6">可以同时选择日期和时间的选择器</text>
    </eui-card>
    <eui-section :title="'日期用法：' + single" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
    </view>
    <eui-section :title="'日期时间用法：' + datetimesingle" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
    </view>
    <eui-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
    </view>
    <eui-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
    </view>
    <eui-section :title="'v-model用法：' + single" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker v-model="single" />
    </view>
    <eui-section :title="'时间戳用法：' + single" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker returnType="timestamp" v-model="single" @change="changeLog($event)" />
    </view>
    <eui-section :title="'date 对象用法：' + datetimesingle" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker type="datetime" returnType="date" v-model="datetimesingle" @change="changeLog" />
    </view>
    <eui-section :title="'插槽用法：' + single" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker v-model="single">我是一个插槽，点击我</eui-datetime-picker>
    </view>
    <eui-section :title="'无边框用法：' + single" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker v-model="single" :border="false" />
    </view>
    <eui-section :title="'隐藏清除按钮用法：' + single" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker v-model="single" :clearIcon="false" />
    </view>
    <eui-section :title="'disabled用法：' + single" type="line"></eui-section>
    <view class="example-body">
      <eui-datetime-picker v-model="single" disabled />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      single: '',
      datetimesingle: '',
      range: ['2024-09-1', '2024-10-28'],
      datetimerange: [],
      start: Date.now() - 1000000000,
      end: Date.now() + 1000000000
    }
  },

  watch: {
    datetimesingle(newval) {
      console.log('单选:', this.datetimesingle);
    },
    range(newval) {
      console.log('范围选:', this.range);
    },
    datetimerange(newval) {
      console.log('范围选:', this.datetimerange);
    }
  },
  mounted() {
    setTimeout(() => {
      this.datetimesingle = Date.now() - 2*24*3600*1000
      this.single = '2021-2-12'
      this.datetimerange = ["2024-09-01 0:01:10", "2024-10-08 23:59:59"]
    },3000)
  },

  methods:{
    change(e) {
      this.single = e
      console.log('change事件:', this.single = e);
    },
    changeLog(e) {
      console.log('change事件:', e);
    },
    maskClick(e){
      console.log('maskClick事件:', e);
    }
  }
}
</script>

<style lang="scss">
.example-body {
  background-color: #fff;
  padding: 10px;
}
</style>
